<template>
  <div class="tinymce">
    <textarea :id="Id" />
  </div>
</template>

<script>
// import { imageUpload } from '@/api/upload'
// import { getToken } from '@/utils/auth'
import tinymce from 'tinymce'
// import VueTinymce from "@packy-tang/vue-tinymce"
// 插件
import 'tinymce/plugins/link' // 链接插件
import 'tinymce/plugins/image' // 图片插件
import 'tinymce/plugins/media' // 媒体插件
import 'tinymce/plugins/table' // 表格插件
import 'tinymce/plugins/lists' // 列表插件
import 'tinymce/plugins/quickbars' // 快速栏插件
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/fullscreen' // 全屏插件
import 'tinymce/icons/default/icons'
// 引入富文本
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/skins/ui/oxide/content.min.css'
import '@/utils/zh_CN'
import 'tinymce/themes/silver'

export default {
  name: 'Tinymce',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    const Id = Date.now()
    return {
      Id,
      flag: true,
      DefaultConfig: {
        menubar: false,
        toolbar:
          'undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
        toolbar_drawer: 'sliding',
        quickbars_insert_toolbar: 'quickimage quicktable',
        quickbars_selection_toolbar:
          'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor|emoticons',
        plugins: 'link image media table lists fullscreen quickbars',
        images_upload_url: '/demo/upimg.php',
        language: 'zh_CN',
        height: 500,
        browser_spellcheck: true, // 拼写检查
        branding: false, // 去水印
        statusbar: false, // 隐藏编辑器底部的状态栏
        elementpath: false, // 禁用下角的当前标签路径
        paste_data_images: true // 允许粘贴图像
      }
    }
  },
  watch: {
    value(val) {
      if (this.flag) {
        this.$nextTick(() => tinymce.activeEditor.setContent(val))
      }
      this.flag = true
    }
  },
  beforeDestroy() {
    // 销毁tinymce
    this.$emit('on-destroy')
    window.tinymce.remove(`#${this.Id}`)
  },
  mounted() {
    this.init()
  },
  destroyed() {
    this.destroyTinymce()
  },
  methods: {
    init() {
      const self = this
      window.tinymce.init({
        ...this.DefaultConfig,
        // images_upload_handler: function(blobInfo, success, failure) {
        //   const token = getToken()
        //   const formData = new FormData()
        //   formData.append('file', blobInfo.blob())
        //   imageUpload(formData, {
        //     headers: { token: token, 'Content-Type': 'application/json' }
        //   }).then((res) => {
        //     const { data } = res
        //     success(data)
        //   })
        // },
        setup: editor => {
          editor.on('init', () => {
            self.loading = false
            self.$emit('on-ready')
            editor.setContent(self.value)
          })
          editor.on('input change undo redo', () => {
            self.flag = false
            self.$emit('input', editor.getContent())
          })
        },
        selector: `#${this.Id}`
      })
    },
    destroyTinymce() {
      const tinymce = window.tinymce.get(this.Id)
      if (tinymce) {
        tinymce.destroy()
      }
    }
  }
}
</script>
